@charset 'utf-8';
@import "reset";
@keyframes xuan1{
	from{transform: rotateZ(0);}
	to{transform: rotateZ(360deg);}
}
@keyframes xuan2{
	from{transform: rotateZ(30deg);}
	to{transform: rotateZ(390deg);}
}
@keyframes xuan3{
	from{transform: rotateZ(60deg);}
	to{transform: rotateZ(420deg);}
}
@keyframes xuan4{
	from{transform: rotateZ(90deg);}
	to{transform: rotateZ(450deg);}
}
@keyframes xuan5{
	from{transform: rotateZ(120deg);}
	to{transform: rotateZ(480deg);}
}
@keyframes xuan6{
	from{transform: rotateZ(150deg);}
	to{transform: rotateZ(510deg);}
}
.rotateBj{
				width: 100vw;
				height: 100vh;
				overflow: hidden;
				.line{
					width: 0;
					height: 0;
					border-bottom: 40px transparent solid;
					border-top: 40px transparent solid;
					border-right: 25rem solid #555;
					border-left: 25rem solid #555;
					position: absolute;
					transform-origin: center;
					margin: auto;
					top: -999px;
					bottom: -999px;
					left: -999px;
					right: -999px;
					z-index: 1;
				}
				.line:nth-of-type(1){
					animation: xuan1 3s linear infinite;
				}
				.line:nth-of-type(2){
					animation: xuan2 3s linear infinite;
				}
				.line:nth-of-type(3){
					animation: xuan3 3s linear infinite;
				}
				.line:nth-of-type(4){
					animation: xuan4 3s linear infinite;
				}
				.line:nth-of-type(5){
					animation: xuan5 3s linear infinite;
				}
				.line:nth-of-type(6){
					animation: xuan6 3s linear infinite;
				}	
			}
body{
	.loading{
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		z-index: 2;
		overflow: hidden;
		background-color: white;
		// display: none;
		.Bj{
			width: 110vw;
			position: absolute;
			z-index: 1;
			img{
				width: 100%;
			}
		}
		.star{
			width: 100vw;
			position: absolute;
			z-index: 2;
			img{
				width: 100%;
			}
		}
		.renwu{
			width: 100vw;
			position: absolute;
			z-index: 3;
			top: 10vh;
			img{
				width: 100%;
			}
		}
		.kglogo{
			width: 20vw;
			position: absolute;
			z-index: 3;
			top: 65vh;
			left: 80vw;
			img{
				width: 100%;
			}
		}
		.rock{
			width: 30vw;
			position: absolute;
			z-index: 3;
			top: 76vh;
			left: 26vw;
			img{
				width: 100%;
			}
		}
		.paizi{
			width: 35vw;
			position: absolute;
			z-index: 3;
			bottom: 0vh;
			left: 27%;
			img{
				width: 100%;
			}
		}
		.tBtn{
			width: 20vw;
			position: absolute;
			z-index: 3;
			right: 0;
			top: 90vh;
			display: none;
			img{
				width: 100%;
			}
		}
		.loadingText{
			width: 50vw;
			padding-left: 30px;
			position: absolute;
			z-index: 3;
			// border: #000000 1px solid;
			left: 0;
			bottom: 0;
		}
	}
	.index{
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		z-index: 2;
		overflow: hidden;
		display: none;
		background-color: white;
		.logo{
			height: 2.75rem;
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 2;
			img{
				height: 100%;
			}
		}
		.motif{
			height: 9rem;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 60px;
			z-index: 3;
			img{
				height: 100%;
			}
		}
		.mouth{
			width: 90vw;
			position: absolute;
			left: 10%;	
			animation: pulse infinite 1s;
			top: 182px;
			z-index: 2;
			img{
				width: 100%;
			}
		}
		.people{
			width: 100vw;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 46px;
			z-index: 3;
			img{
				width: 100%;
			}
		}
		.startBtn{
			height: 4rem;
			position: absolute;
			width: 40vw;
			left: 30%;
			bottom: 10px;
			z-index: 3;
			animation: tada infinite 1s;
			img{
				width: 100%;
			}
		}
	}
	.choose{
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 3;
		top: 0;
		// bottom: 0;
		display: none;
		// background-color: pink;
		.cho{
			width: 100vw;
			height: 40vh;
			position: absolute;
			bottom: 0;
			// background: pink;
			margin: 0;
			.choA{
				width: 70vw;
				height: 7vh;
				position: absolute;
				top: 6vh;
				left: 2vw;
				z-index: 4;
				background-image: url(../img/A.png);
				background-size:100% 100% ;
				padding-left: 15vw;
				padding-top: 1vh;
			}
			.choB{
				width: 70vw;
				height: 7vh;
				position: absolute;
				top: 17vh;
				left: 2vw;
				z-index: 4;
				background-image: url(../img/B.png);
				background-size:100% 100% ;
				padding-left: 15vw;
				padding-top: 1vh;
			}
			.choC{
				width: 70vw;
				height: 7vh;
				position: absolute;
				top: 27vh;
				left: 2vw;
				z-index: 4;
				background-image: url(../img/C.png);
				background-size:100% 100% ;
				padding-left: 15vw;
				padding-top: 1vh;
			}
		}
			.time{
				width: 18vw;
				height: 10vh;
				position: absolute;
				top: 67vh;
				right: 4vw;
				background-image: url(../img/timebox.png);
				background-size:100% 100% ;
				padding-left: 4vw;
				padding-top: 3vh;
				.count{
					text-align: center;
				}
			}
	}
	.result{
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		background-image: url(../img/resultBj.png);
		background-size: 100% 100%;
		.touxiang{
			width: 45vw;
			height: 10vh;
			position: absolute;
			background-image: url(../img/头像.png);
			background-size: 100% 100%;
			top: 3%;
			left: 5%;
		}
		.logo{
			width: 35vw;
			height: 7vh;
			position: absolute;
			top:2%;
			right: 1%;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.duanwei{
			width: 35vw;
			height: 20vh;
			position: absolute;
			top: 12%;
			left: 33%;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.resultNum{
			width: 50vw;
			height: 10vh;
			background-image: url(../img/result.png);
			background-size: 100% 100%;
			position: absolute;
			top: 31%;
			left: 25%;
			p{
				height: 100%;
				font-weight: bold;
				// padding-top: 18px;
				line-height: 11vh;
				padding-left: 20px;
				font-size: 18px;
			}
		}
		.resultText{
			width: 80vw;
			height: 14vh;
			position: absolute;
			top: 42%;
			left: 10%;
			background-image: url(../img/result2.png);
			background-size: 100% 100%;
		}
		.re-L{
			width: 35vw;
			height: 8vh;
			position: absolute;
			background-image: url(../img/re-left.png);
			background-size: 100% 100%;
			top: 60%;
			left: 10%;
			p{
				width: 100%;
				height: 8vh;
				text-align: center;
				padding-top: 10px;
				font-weight: bold;
				// background-color: palegoldenrod;
			}
		}
		.re-R{
			width: 40vw;
			height: 8vh;
			position: absolute;
			background-image: url(../img/re-right.png);
			background-size: 100% 100%;
			top: 60%;
			right: 10%;
			p{
				width: 100%;
				height: 8vh;
				font-weight: bold;
				// text-align: center;
				padding-top: 10px;
				padding-left: 10px;
				// background-color: palegoldenrod;
			}
		}
		.phb{
			width: 80vw;
			height: 25vh;
			position: absolute;
			bottom: 5%;
			left: 10%;
			background-image: url(../img/paihangbang.png);
			background-size: 100% 100%;
		}
	}
	.swiper-container{
		height: 100vh;
		width: 100vw;
	    position: relative;
		top: 0;
		z-index: 2;
		display: none;
		background-color: white;
		.swiper-wrapper{
			.movie{
				position: relative;
				overflow: hidden;
				.movieBj{
					position: absolute;
					z-index: 1;
					img{
						width: 110%;
					}
				}
				.movieText{
					width: 50vh;
					position: absolute;
					z-index: 2;
					top: 7vh;
					// animation: bounceInDown 2s ;
					img{
						width: 100%;
					}
				}
				.moviePeo{
					width: 50vh;
					position: absolute;
					z-index: 2;
					top: 16vh;
					left: 10%;
					// animation: bounceInDown 1.5s ;
					img{
						width: 100%;
					}
				}
				.movieWall{
					width: 60vh;
					position: absolute;
					z-index: 2;
					top: 48vh;
					img{
						width: 100%;
					}
				}
			}
			.Rock{
				.light{
					width: 100vw;
					position: absolute;
					top: 0;
					z-index: 3;
					animation: pulse infinite 1s;
					img{
						width: 100%;
					}
				}
				.peoL{
					width: 60vw;
					position: absolute;
					top: 24vh;
					left: 0;
					z-index: 3;
					animation: pulse infinite 1s;
					img{
						width: 100%;
					}
				}
				.rockPeo{
					width: 70vw;
					position: absolute;
					top: 13vh;
					left: 15%;
					z-index: 3;
					img{
						width: 100%;
					}
				}
				.peoR{
					width: 60vw;
					position: absolute;
					top: 17vh;
					right: 0;
					z-index: 2;
					animation: pulse infinite 1s;
					img{
						width: 100%;
					}
				}
				.floor{
					width: 100vw;
					position: absolute;
					z-index: 2;
					left: 0%;
					 top: 50vh;
					img{
						width: 100%;
					}
				}
			}
			.classical{
				position: relative;
				overflow: hidden;
				.classsicalBj{
					width: 100vw;
					position: absolute;
					img{
						width: 110%;
					}
				}
				.light{
					width: 100vw;
					position: absolute;
					top: 0;
					z-index: 3;
					animation: pulse infinite 1s;
					img{
						width: 100%;
					}
				}
				.clafloor{
					width: 100vw;
					position: absolute;
					top: 45vh;
					img{
						width: 100%;
					}
				}
				.peoxizao{
					width: 100vw;
					position: absolute;
					z-index: 2;
					top: 10vh;
					img{
						width: 100%;
					}
				}
				.dbanL{
					width: 60vw;
					position: absolute;
					left: 0;
					top: 25vh;
					z-index: 3;
					img{
						width:100%
					}
				}
				.feizaoPeo{
					width: 80vw;
					position: absolute;
					z-index: 4;
					top:12vh;
					left: 18%;
					img{
						width: 100%;
					}
				}
				.dbanR{
					width: 60vw;
					position: absolute;
					z-index: 5;
					top: 35vh;
					right: 0;
					img{
						width: 100%;
					}
				}
			}
			.oldsong{
				position: relative;
				overflow: hidden;
				.oldsongBj{
					width: 110vw;
					position: absolute;
					z-index: 1;
					img{
						width: 100%;
					}
				}
				.light{
					width: 100vw;
					position: absolute;
					right: -30%;
					z-index: 2;
					animation: pulse infinite 1s;
					img{
						width: 100%;
					}
				}
				.flower{
					width: 100vw;
					position: absolute;
					top: 35vh;
					z-index: 3;
					animation: pulse infinite 1s;
					img{
						width: 100%;
					}
				}
				.singer{
					width: 80vw;
					position: absolute;
					top: 15vh;
					left: 10%;
					z-index: 4;
					img{
						width: 100%;
					}
				}
			}
			.Pop{
				position: relative;
				overflow: hidden;
				.popBj{
					width: 110vw;
					position: absolute;
					z-index: 1;
					img{
						width: 100%;
					}
				}
				.woman{
					width: 50vw;
					position: absolute;
					right: 0;
					top: 8vh;
					z-index: 2;
					img{
						width: 100%;
					}
				}
				.text{
					width: 60vw;
					position: absolute;
					z-index: 3;
					top: 1;
					left: 7vw;
					img{
						width: 100%;
					}
				}
				.man{
					width: 90vw;
					position: absolute;
					z-index: 3;
					top: 24vh;
					left: 4vw;
					img{
						width: 100%;
					}
				}
			}
			.car{
				position: relative;
				overflow: hidden;
				.carBj{
					width: 110vw;
					position: absolute;
					top: 0;
					img{
						width: 100%;
					}
				}
				.light{
					width: 80vw;
					position: absolute;
					z-index: 2;
					top: 0;
					left: 10%;
					animation: pulse infinite 1s;
					img{
						width: 100%;
					}
				}
				.yao{
					width: 70vw;
					position: absolute;
					z-index: 3;
					top: 8vh;
					left: 10%;
					animation: flash infinite 2s;
					img{
						width: 100%;
					}
				}
				.che{
					width: 100vw;
					position: absolute;
					z-index: 3;
					top: 24vh;
					animation: tada infinite 2s;
					img{
						width: 100%;
					}
				}
			}
		}
	}
	
	
}